<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>动态详情</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weui.css" />
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weuix.css" />
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.min.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.weui.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/macy.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/php.js"></script>
    <script src="/lobstersdk/lobster.js"></script>
    <script src="/jslib/template-web.js"></script>
    <script src="../js/dynamicitem.js"></script>
    <script src="/jslib/jquery-3.4.1.min.js"></script>
    <script src="../js/flyzoom.js"></script>
    <style>
        .icon {
            font-size: 24px;
            line-height: 40px;
            margin: 5px 0;
            color: #07C160;
            -webkit-transition: font-size 0.5s ease-out 0s;
            -moz-transition: font-size 0.5s ease-out 0s;
            transition: font-size 0.5s ease-out 0s;
        }

        .label {
            line-height: 2em;
            height: 2em;
            padding: 0 5px;
            border-radius: 5px;
        }

        .bottom {
            background-color: #F5F5F5;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            align-items: center;
            display: flex;
            padding: 10px 4px;
            z-index: 2;
        }

        .weui-media-box {
            padding: 4px 15px;
        }

        .color-gray {
            color: #999999;
        }
    </style>
</head>

<body ontouchstart>
    <div id="dynamiclist">

    </div>
    <div class="page-bd-15" style="display: flex; align-items: center;justify-content: space-between;">
        <h4 class="weui-media-box__title">评论</h4>
        <div><span class="sorticon color-gray" data-sort="1" style="padding-right: 5px;">按热度</span>|<span
                class="sorticon" data-sort="0" style="padding-left: 5px;">按时间</span>
        </div>
    </div>
    <div id="evaluatelist">


    </div>
    <a href="javascript:void(0);" style="margin:0 15px;" class="weui-btn weui-btn_default weui-btn_loading"
        id="loadmore">加载更多</a>
    <div style="height:100px;"></div>
    <div class="bottom">
        <div class="weui-cell" style="width: 100%;padding:0;">
            <div class="weui-cell__bd">
                <input id="evaluatetxt" class="weui-input" placeholder="说点什么。。。" type="text">
            </div>
            <a href="javascript:void(0);" style="display: none;" class="weui-btn weui-btn_mini weui-btn_primary"
                id="fabu">发布</a>
        </div>
    </div>
</body>

</html>
<script id="evalutelisttemp" type="text/html">
    {{each list item}}
    <div class="evaluateitem weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd" style="width: 40px;height: 40px;">
            <img class="weui-media-box__thumb" style="border-radius:50%;" src="{{item.UserImg}}" alt="">
        </div>
        <div class="weui-media-box__bd">
            <div style="display: flex; align-items: center;justify-content: space-between;">
            <p class="weui-media-box__title">{{item.NickName}}
                {{if(dynamic.UserId==item.UserId)}}
                <span style="color: #4F91E2;">（作者）</span>
                {{/if}}
            </p>
             <div data-item="{{item}}">
                <span class="icon icon-79 evaluateicon"></span>
                {{if(item.IsLike==1)}}
                <span data-islike={{item.IsLike}} class="icon icon-38 likeicon"></span><span style="padding-left: 8px;">{{item.LikesCount||0}}</span>
                {{else}}
                <span data-islike={{item.IsLike}} class="icon icon-65 likeicon"></span><span style="padding-left: 8px;">{{item.LikesCount||0}}</span>
                {{/if}}
                </div>
            </div>
            <div class="weui-media-box__title">{{item.Content}}</div>  
            <p class="weui-media-box__desc">{{(item.EvaluateTime||"").substring(0,19)}}</p> 
        </div> 
    </div>
        {{each item.ChildList child}}
        <div  class="evaluteitem{{child.EvaluateId}} weui-media-box weui-media-box_appmsg" style="padding-left: 50px;">
        <div class="weui-media-box__hd"  style="width: 40px;height: 40px;">
            <img class="weui-media-box__thumb" style="border-radius:50%;" src="{{child.UserImg}}" alt="">
        </div>
        <div class="weui-media-box__bd"> 
            <p class="weui-media-box__title">{{child.NickName}}
                {{if(dynamic.UserId==child.UserId)}}
                <span style="color: #4F91E2;" >（作者）</span>
                {{/if}}
            </p> 
             <div class="weui-media-box__title">{{child.Content}}</div>  
             <p class="weui-media-box__desc">{{(child.EvaluateTime||"").substring(0,19)}}</p> 
        </div> 
        </div>
        {{/each}} 
        {{if(item.ChildNum>2)}}
        <p data-item="{{item}}" class="weui-media-box__title tomore" style="text-align:center;padding:5px 0">查看更多>></p> 
        {{/if}}
    {{/each}}
</script>
<script>

    lobsterh5.main({
        data: {
            dynamicId: 0,
            sort: 0,
            evaluatelist: [],
            evalute: 0,
            evaluatecount: 0,
            page: 1,
            limit: 5,
            hasmore: true,
            dynamic: {},
            evaluate: {},
            appendevaluateObj: "",
            appendevaluatenum: 0,
        },
        //初始化页面
        pageload: function () {
            jQuery.noConflict();
            var self = this;
            self.data.dynamicId = lobsterh5.GetUrlParam("dynamicId");
            self.data.evaluate.DynamicId = self.data.dynamicId;
            self.data.evaluate.UserId = localStorage.getItem("userId");
            self.data.evaluate.PId = 0;
            self.data.evaluate.IsLike = 0;
            self.data.evaluate.LikesCount = 0;
            self.data.evalute = lobsterh5.GetUrlParam("evalute");
            if (self.data.evalute == 1)
                setTimeout(() => {
                    $("#evaluatetxt").focus();
                }, 500);
            self.initevent();
            self.getDynamicDetail();
        },
        //初始化事件
        initevent: function () {
            var self = this;
            $("#evaluatetxt").keyup(function () {
                console.log($(this).val());
                if ($(this).val() != '')
                    $("#fabu").show();
                else
                    $("#fabu").hide();
            })
            $("#fabu").click(function () {
                var content = $("#evaluatetxt").val();
                if (!content) {
                    $.toast("内容不能为空", "text");
                    $("#evaluatetxt").focus();
                    return;
                }
                self.data.evaluate.Content = $("#evaluatetxt").val();
                self.sendevaluate()
            })
            $("#loadmore").click(function () {
                self.getEvaluateList();
            })
            $("#evaluatelist").on("click", ".evaluateicon", function () {
                self.data.evaluate.PId = $(this).parent("div").data("item").EvaluateId;
                var parent = $(this).parents(".evaluateitem");
                var siblings = parent.siblings(".evaluateitem" + self.data.evaluate.PId);
                self.data.appendevaluateObj = parent;
                self.data.appendevaluatenum = siblings.length + 1;
                console.log(self.data.appendevaluateObj);
                console.log(self.data.appendevaluatenum);
                $("#evaluatetxt").focus();
            })
            $("#evaluatelist").on("click", ".likeicon", function () {
                var _this = $(this);
                var item = _this.parent("div").data("item");
                var islike = _this.data("islike");
                lobsterh5.POST("/lowcode/APP20211203093514696/name/?fun=Dynamic.LikeEvaluate", {
                    EvaluateId: item.EvaluateId,
                    UserId: localStorage.getItem("userId"),
                    IsLike: islike == 1 ? 0 : 1,
                }).then(res => {
                    $.toast(islike == 1 ? '取消成功' : '点赞成功', 'text');
                    if (islike == 1) {
                        _this.removeClass("icon-38").addClass("icon-65");
                        _this.data("islike", 0);
                    }
                    else {
                        _this.addClass("icon-38").removeClass("icon-65");
                        _this.data("islike", 1);
                    }
                    _this.next("span").text(res.evaluate.LikesCount);
                }).catch(res => {
                    console.log(res.msg || res);
                    $.toast(res.msg || res, 'forbidden');
                })
            })
            $("#evaluatelist").on("click", ".tomore", function () {
                var item = $(this).data("item");
                location.href = 'evaluatelist.html?dynamicId=' + self.data.dynamic.DynamicId +
                    "&pId=" + item.EvaluateId + "&dynamicUserId=" + self.data.dynamic.UserId
            })
            $(".sorticon").click(function () {
                self.data.sort = $(this).data("sort");
                $(this).removeClass("color-gray").siblings().addClass("color-gray");
                self.data.page = 1;
                self.data.hasmore = true;
                $("#evaluatelist").html("");
                self.getEvaluateList();
            })
        },
        //获取动态详情
        getDynamicDetail() {
            var self = this;
            lobsterh5.GET("/lowcode/APP20211203093514696/name/?fun=Dynamic.GetDynamicDetail", {
                dynamicId: self.data.dynamicId,
                userId: localStorage.getItem("userId")
            }).then(res => {
                self.data.dynamic = res.detail;
                $("#dynamiclist").lobsterdynamicitem({
                    list: [res.detail], userId: self.data.userId, btns: {
                        deletebtn: false,
                        reportbtn: true,
                        followbtn: true
                    },
                    detail: true,
                    onEvaluateSuccess: function (item) {
                        self.data.evaluate.PId = 0;
                        $("#evaluatetxt").focus();
                    }
                })
                self.getEvaluateList();
            }).catch(res => {
                console.log(res.msg || res);
                $.toast(res.msg || res, 'forbidden');
            })
        },
        //获取所有评论
        getEvaluateList() {
            var self = this;
            if (!self.data.hasmore) return;
            // if ($("#loadmore").find("i").length > 0) return;
            $("#loadmore").html("<i class=\"weui-loading\"></i>正在加载");
            lobsterh5.GET("/lowcode/APP20211203093514696/name/?fun=Dynamic.GetEvaluateList", {
                page: self.data.page,
                limit: self.data.limit,
                userId: localStorage.getItem("userId"),
                dynamicId: self.data.dynamicId,
                sort: self.data.sort,
            }).then(res => {
                var html = template("evalutelisttemp", { list: res, dynamic: self.data.dynamic });
                $("#evaluatelist").append(html);
                if (res.length < self.data.limit) {
                    self.data.hasmore = false;
                    $("#loadmore").hide();
                } else {
                    $("#loadmore").html("加载更多");
                    self.data.page++;
                }
                self.data.isloading = true;
            }).catch(res => {
                console.log(res.msg || res);
                $.toast(res.msg || res, 'forbidden');
            })
        },
        sendevaluate(_id, item) {
            var self = this;
            lobsterh5.POST("/lowcode/APP20211203093514696/name/?fun=Dynamic.EvaluateDynamic", self.data.evaluate).then(res => {
                $.toast("评论成功", "text");
                if (self.data.evaluate.PId == 0) {
                    var tpl = '{{each list item}} <div class="evaluateitem weui-media-box weui-media-box_appmsg">\
        <div class="weui-media-box__hd" style="width: 40px;height: 40px;">\
            <img class="weui-media-box__thumb" style="border-radius:50%;" src="{{item.UserImg}}" alt="">\
        </div>\
        <div class="weui-media-box__bd">\
            <div style="display: flex; align-items: center;justify-content: space-between;">\
            <p class="weui-media-box__title">{{item.NickName}}\
                {{if(dynamic.UserId==item.UserId)}}\
                <span style="color: #4F91E2;">（作者）</span>\
                {{/if}}\
            </p>\
             <div data-item="{{item}}">\
                <span class="icon icon-79 evaluateicon"></span>\
                {{if(item.IsLike==1)}}\
                <span data-islike={{item.IsLike}} class="icon icon-38 likeicon"></span><span style="padding-left: 8px;">{{item.LikesCount||0}}</span>\
                {{else}}\
                <span data-islike={{item.IsLike}} class="icon icon-65 likeicon"></span><span style="padding-left: 8px;">{{item.LikesCount||0}}</span>\
                {{/if}}\
                </div>\
            </div>\
            <div class="weui-media-box__title">{{item.Content}}</div>  \
            <p class="weui-media-box__desc">{{(item.EvaluateTime||"").substring(0,19)}}</p> \
        </div> \
    </div> {{/each}}'
                    $(".evaluate").next().text(res.dynamic.EvaluateCount);
                    var appendhtml = template.render(tpl, { list: [res.evaluate], dynamic: self.data.dynamic });
                    $("#evaluatelist").append(appendhtml);
                } else {
                    var tpl = '{{each list child}}\
        <div class="evaluteitem{{child.EvaluateId}}  weui-media-box weui-media-box_appmsg" style="padding-left: 50px;">\
        <div class="weui-media-box__hd"  style="width: 40px;height: 40px;">\
            <img class="weui-media-box__thumb" style="border-radius:50%;" src="{{child.UserImg}}" alt="">\
        </div>\
        <div class="weui-media-box__bd"> \
            <p class="weui-media-box__title">{{child.NickName}}\
                {{if(dynamic.UserId==child.UserId)}}\
                <span style="color: #4F91E2;" >（作者）</span>\
                {{/if}}\
            </p> \
             <div class="weui-media-box__title">{{child.Content}}</div>  \
             <p class="weui-media-box__desc">{{(child.EvaluateTime||"").substring(0,19)}}</p>\
        </div> \
        </div>\
        {{/each}}'
                    var evalute = res.evaluate;
                    evalute.ChildNum = self.data.appendevaluatenum;
                    var appendhtml = template.render(tpl, { list: [evalute], dynamic: self.data.dynamic });
                    self.data.appendevaluateObj.after(appendhtml);
                }
                $("#evaluatetxt").val("");
                $("#fabu").hide();
                self.data.evaluate.PId = 0;
            }).catch(res => {
                console.log(res.msg || res);
                $.toast(res.msg || res, 'forbidden');
            })
        }
    }); 
</script>